const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
module.exports = {
  //入口文件路径
  entry: path.resolve(__dirname, "../src/index.js"),

  //出口配置
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "./js/bundle.js"
  },

  //loader配置
  module: {
    rules: [{
      /* 
        test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
      */
      test: /\.css$/i,
      /* 
        css-loader:为了识别css类型文件进行打包
        style-loader:js把样式放在style标签中,并插入到页面中
        use后如果是一个数组,则是从后向前一致加载
      */
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    }, {
      /* 
        test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
      */
      test: /\.less$/i,
      /* 
        css-loader:为了识别css类型文件进行打包
        style-loader:js把样式放在style标签中,并插入到页面中
        use后如果是一个数组,则是从后向前一致加载
      */
      use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
    }, {
      test: /\.(png|jpg|gif|webp)$/,
      //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 30 * 1024, // 小于15kb以下的图片会被打包成base64格式
        },
      },
      generator: {
        filename: 'images/[name][ext]'
      }
    }, 
  ]},
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  //插件配置
  plugins: [new MiniCssExtractPlugin({
    //输出独立文件的文件名
    filename: './css/main.css'
  }), new HtmlWebpackPlugin({
    
    template: path.resolve(__dirname,'../public/index.html'),
    filename: "index.html",
    minify: {
      collapseWhitespace: true,
      keepClosingSlash: true,
      removeComments: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      useShortDoctype: true
    }
  }), new ESLintPlugin({
    fix: true
  }), new CopyWebpackPlugin({
    patterns: [{
      from: path.resolve(__dirname,"../public"),
      to: "public",
       //配置复制时忽略的文件
      globOptions: {
        ignore: ["**/index.html"]
      }
    }],
  }), ],


  //模式
  mode: "production"
}